<template>
  <el-container>
    <el-aside width="200px">
      <el-input
        v-model="filterText"
        style="padding: 5px"
        size="mini"
        placeholder="输入关键字进行过滤"
      />
      <el-tree
        ref="tree"
        class="filter-tree"
        :data="leftTree"
        node-key="classId"
        :props="defaultProps"
        :show-checkbox="false"
        :highlight-current="true"
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="nodeSelect"
      >
        <div slot-scope="{node, data}">
          <!-- 如果没有下级显示文档图标 -->
          <span v-if="data.children.length === 0">
            <i style="margin-left: 3px" class="el-icon-document" />
          </span>
          <!-- 如果有下级判断是否展开 -->
          <span v-else @click.stop="openBtn(node)">
            <i
              v-if="node.expanded"
              style="margin-left: 3px"
              class="el-icon-plus"
            />
            <i v-else style="margin-left: 3px" class="el-icon-minus" />
          </span>
          <span style="margin-left: 3px">{{ node.label }}</span>
        </div>
      </el-tree>
    </el-aside>
    <el-main>
      <!-- 搜索栏 -->
      <el-form ref="searchForm" :model="searchForm" :inline="true" size="small">
        <el-form-item prop="courseName">
          <el-input v-model="searchForm.courseName" placeholder="请输入课程名称" />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="searchBtn">搜索</el-button>
          <el-button style="color:#FF7670;" icon="el-icon-close" @click="resetBtn">重置</el-button>
          <el-button v-permission="['sys:setCourse:assign']" type="primary" icon="el-icon-plus" @click="addBtn">分配课程</el-button>
        </el-form-item>
      </el-form>
      <sys-dialog
        :title="addDialog.title"
        :height="addDialog.height"
        :width="addDialog.width"
        :visible="addDialog.visible"
        @onClose="onClose"
        @onConfirm="onConfirm"
      >
        <div slot="content">
          <el-transfer
            v-model="value"
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入课程名称"
            :props="{
              key: 'courseId',
              label: 'courseName'
            }"
            :data="courseList"
            :titles="['待选课程', '已选课程']"
          />
          <el-form
            ref="addModel"
            style="margin-top: 20px;"
            :model="addModel"
            :rules="rules"
            label-width="80px"
            :inline="true"
            size="small"
          >
            <el-form-item prop="courseYear" label="开课年份">
              <el-date-picker
                v-model="addModel.courseYear"
                value-format="yyyy"
                type="year"
                placeholder="选择开课年份"
              />
            </el-form-item>

            <el-form-item prop="type" label="学期">
              <el-select v-model="addModel.type" placeholder="请选择学期">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

          </el-form>
        </div>
      </sys-dialog>
      <el-table :data="tableList" :height="tableHeight" border stripe>
        <el-table-column prop="className" label="班级名称" />
        <el-table-column prop="courseName" label="课程名称" />
        <el-table-column prop="courseYear" label="开课年份" />
        <el-table-column prop="type" label="开课时期">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === '0'" type="success" size="small">春季</el-tag>
            <el-tag v-if="scope.row.type === '1'" type="danger" size="small">秋季</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="$checkPermission(['ssys:setCourse:delete'])" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button v-permission="['sys:setCourse:delete']" type="danger" size="small" icon="el-icon-close" @click="deleteBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页插件 -->
      <el-pagination
        :current-page.sync="searchForm.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchForm.total"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </el-main>
  </el-container>
</template>

<script>
import { deleteClassCourseApi, getClassCourseApi, getClassTreeListApi, getCoursesListApi, saveAssignClassCourseApi } from '@/api/course'
import SysDialog from '@/components/dialog/SysDialog.vue'
export default {
  components: {
    SysDialog
  },
  data() {
    return {
      options: [{
        value: '0',
        label: '春季'
      }, {
        value: '1',
        label: '秋季'
      }],
      // 绑定弹出框数据
      addModel: {
        classId: '',
        courseYear: '',
        type: ''
      },
      // 弹出框表单数据验证
      rules: {
        courseYear: [{
          required: true,
          message: '请选择开课年份'
        }],
        type: [{
          required: true,
          message: '请选择学期'
        }]
      },
      courseList: [],
      value: [],
      className: '',
      type: '',
      // 弹出框设置
      addDialog: {
        title: '',
        height: 400,
        width: 650,
        visible: false
      },
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'className'
      },
      searchForm: {
        courseName: '',
        classId: '',
        courseYear: '',
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      leftTree: [],
      selectList: [],
      // 表格属性
      tableHeight: 0,
      tableList: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 220
    })
  },
  created() {
    this.getTree()
    this.getClassCourseList()
  },
  methods: {
    async getClassCourseList() {
      const res = await getClassCourseApi(this.searchForm)
      if (res && res.code === 200) {
        this.tableList = res.data.records
        this.searchForm.total = res.data.total
      }
    },
    filterMethod(query, item) {
      return item.courseName.indexOf(query) > -1
    },
    nodeSelect(node) {
      this.className = node.className
      this.classId = node.classId
      this.type = node.type
      this.addModel.classId = node.classId
      this.searchForm.classId = node.classId
      this.getClassCourseList()
    },
    // 页容量变化
    sizeChange(val) {
      this.searchForm.pageSize = val
      this.getClassCourseList()
    },
    // 当前页变化
    currentChange(val) {
      this.searchForm.currentPage = val
      this.getClassCourseList()
    },
    // 搜索按钮
    searchBtn() {
      this.getClassCourseList()
    },
    // 重置按钮
    resetBtn() {
      this.searchForm.courseName = ''
      this.searchForm.currentPage = 1
      this.searchForm.pageSize = 10
      this.getClassCourseList()
    },
    async deleteBtn(row) {
      const confirm = await this.$myconfirm('确认删除该条数据吗？')
      if (confirm) {
        const res = await deleteClassCourseApi({ classCourseId: row.classCourseId })
        if (res && res.code === 200) {
          this.$message.success(res.msg)
          this.getClassCourseList()
        }
      }
    },
    // 新增按钮
    async addBtn() {
      this.value = []
      this.selectList = []
      this.addModel.courseYear = ''
      this.addModel.type = ''
      if (!this.type || this.type === '0') {
        this.$message.warning('请选择班级')
        return
      }
      // 获取课程数据
      const res = await getCoursesListApi()
      if (res && res.code === 200) {
        this.courseList = res.data
        console.log(this.courseList)
      }
      // 清空数据
      // if (this.$refs.addModel !== undefined) {
      //   this.$refs.addModel.resetFields()
      //   this.$emptyData(this.addModel)
      // }
      this.addDialog.title = '为【' + this.className + '】分配课程'
      // this.addModel.type = '0'
      this.addDialog.visible = true
    },
    onClose() {
      this.addDialog.visible = false
    },
    onConfirm() {
      this.selectList = []
      this.$refs.addModel.validate(async(valid) => {
        if (this.value.length === 0) {
          this.$message.warning('请选择课程')
        }
        if (valid) {
          for (let i = 0; i < this.value.length; i++) {
            const obj = {}
            obj.courseId = this.value[i]
            obj.classId = this.classId
            obj.courseYear = this.addModel.courseYear
            obj.type = this.addModel.type
            this.selectList.push(obj)
          }
          const res = await saveAssignClassCourseApi(this.selectList)
          if (res && res.code === 200) {
          // 消息提示
            this.$message.success(res.msg)
            // 刷新列表
            // this.getList()
            this.getClassCourseList()
            // 关闭弹窗
            this.addDialog.visible = false
          }
        }
      })
    },
    filterNode(value, data) {
      // console.log(value)
      // console.log(data)
      if (!value) return true
      return data.className.indexOf(value) !== -1
    },
    openBtn(node) {
      node.expanded = !node.expanded
    },
    async getTree() {
      const res = await getClassTreeListApi()
      if (res && res.code === 200) {
        this.leftTree = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
  // 将每一行设置为相对位置 方便后面的before after使用绝对位置来固定位置
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  // 子集向右偏移，给树线流出距离
  .el-tree-node__children {
    padding-left: 20px;
  }
  // 竖线
  .el-tree-node :last-child:before{
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  // 自定义的线的公共部分
  .el-tree-node:before,
  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  }
  // 竖线
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  }
  // 横线
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }
  // 去掉自带的展开按钮，一个向下，打开时向右
  .el-tree-node__content>.el-tree-node__expand-icon {
    display: none;
  }
  // 每一行的高度
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
  // 去掉最上层的before after 即最上层的连接线
  ::v-deep .el-tree>div {
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
  }
}

</style>

